ng2-dragula 拖拽工具

发表于

下载

1
npm install ng2-dragula --save

配置

  1. 在AppModule中引入DragulaModule

  1. 引入dragula.min.css

    在style.css中插入:

    1
    @import "~dragula/dist/dragula.css";

使用

一个简单的🌰:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
    <div class='wrapper'>
      <div class='container' [dragula]='"first-bag"'>
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div class='container' [dragula]='"first-bag"'>
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
      </div>
    </div>
  </div>

dragula指令，将容器分组在一起。 不同分组直接不可以拖拽到对方. 分组内部可以通过拖拽改变顺序

1
2
<div [dragula]='"bag-one"'></div>
<div [dragula]='"bag-two"'></div>

dragulaModel指令 配合ngFor使用, 来提供数据. 通过拖动改变后,对应dragulaModel的数据也会改变.

1
2
3
<ul [dragula]='"bag-one"' [dragulaModel]='items'>
  <li *ngFor="let item of items"></li>
</ul>

DragulaService

引入DragulaService来订阅相关事件:

​ dragulaService.drag 拿起元素

​ dragulaService.drop 放下元素

​ dragulaService.over 在元素内部

​ dragulaService.out 在元素外

1
2
3
4
5
constructor(private dragulaService: DragulaService) {
  dragulaService.drag.subscribe((value) => {
    console.log(`drag: ${value[0]}`);
  });
}

一些与dragula交互的方法。

dragulaService.add（name，drake）

dragulaService.setOptions(name, options)

dragulaService.find(name)

dragulaService.destroy(name)

https://github.com/valor-software/ng2-dragula